<template>
	<view>
		<view>1. View组件(跨平台组件)</view>
		<!-- 直接写div是可以,但是不推荐, 并且这个div标签是不跨平台组件 -->
		<view class="title">
			my is view Cross-platform components
		</view>

		<view>2. text</view>
		<text>text cpn</text>

		<view class="button">3. button</view>
		<button>button</button>
		<button type="default">default</button>
		<button type="primary">primary</button>
		<button type="warn">warn</button>

		<view class="image">4. image</view>
		<!-- 相对路径 -->
		<!-- <image src="../../static/images/cvy.png" mode="widthFix"></image> -->
		<!-- 绝对路径 -->
		<!-- <image src="@/static/images/cvy.png" mode="widthFix"></image> -->
		<!-- 导入的图片 -->
		<image class="image" :src="cvy" mode="widthFix"></image>

		<view class="scroll-view">5. scroll-view</view>
		<scroll-view scroll-y="true" class="y-scroll">
			<view class="v-item">item1</view>
			<view class="v-item">item2</view>
			<view class="v-item">item3</view>
			<view class="v-item">item4</view>
			<view class="v-item">item5</view>
			<view class="v-item">item6</view>
			<view class="v-item">item7</view>
		</scroll-view>

		<scroll-view scroll-x="true" class="x-scroll" :show-scrollbar="false">
			<view class="h-item">item1</view>
			<view class="h-item">item2</view>
			<view class="h-item">item3</view>
			<view class="h-item">item4</view>
			<view class="h-item">item5</view>
			<view class="h-item">item6</view>
			<view class="h-item">item7</view>
		</scroll-view>

		<view class="swiper"> 6. swiper</view>
		<swiper 
			class="swiper"
			:indicator-dots="true" 
			indicator-active-color="#ff8198" 
			indicator-color="#f8f8f8"
			:autoplay="true" 
			:interval="3000" 
			:duration="1000"
		>
			<swiper-item>
				<image class="swiper-image" src="@/static/images/banner/banner01.jpeg"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="@/static/images/banner/banner02.jpeg"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import cvy from '@/static/images/cvy.png'
	export default {
		data() {
			return {
				cvy
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.image {
		width: 200rpx;
	}

	.y-scroll {
		height: 400rpx;
		border: 2rpx solid red;
		box-sizing: border-box;

		.v-item {
			height: 200rpx;
			border-bottom: 2rpx solid blue;
		}
	}

	// 局部样式
	.x-scroll {
		white-space: nowrap;
		// 隐藏原生实现的滚动条
		// &::webkit-scrollbar{
		// 	display: none;
		// }

		// 编写全局样式
		// :global()
		:deep(.hy-h-scroll .uni-scroll-view::-webkit-scrollbar) {
			display: none;
		}

		.h-item {
			display: inline-block;
			height: 200rpx;
			width: 200rpx;
			border-right: 2rpx solid hotpink;
		}
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}
</style>